<template>
    <div class="header">
    <div class="box">
      <div class="left">
        <div class="menu" @click="back">
          <div class="tu"><iconBack class="icon"></iconBack></div>
          <div class="text">Back</div>
        </div>
        <div class="menu">
          <div class="tu"><iconEarth class="icon"></iconEarth></div>
          <div class="text">English</div>
        </div>
        <div class="menu">
          <div class="tu"><iconInfo class="icon"></iconInfo></div>
          <div class="text">Customer Service</div>
        </div>
        <div class="menu">
          <div class="tu"><iconPhoneOne class="icon"></iconPhoneOne></div>
          <div class="text" style="border:0;">USPS Mobile</div>
        </div>
      </div>
      <div class="left" style="float: right;">
        <div class="menu">
          <div class="tu"><iconUser class="icon"></iconUser></div>
          <div class="text" style="border: 0;">Register</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
img{
  width: 100%;
  height: 100%;
}
.icon{
  width: 100%;
  height: 100%;
}
.header{
  width: 100%;
  height: 34px;
  background-color: rgb(189, 189, 189);
  border-bottom:3.5px solid red ;
  display: flex;
  align-items: center;
  .box{
    width: 1170px;
    /* height: 15px; */
    height: 100%;
    /* background-color: antiquewhite; */
    margin:auto;
    .left{
      float: left;
      height: 100%;
      /* width: 300px; */
      display: flex;
      flex-direction: row;
      overflow-wrap: break-word;
      /* background-color: aquamarine; */
      .menu{
        padding-left: 10px;
        overflow-wrap: break-word;
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
        /* background-color: yellowgreen; */
        /* margin-right: 28px; */
        .tu{
          width: 17px;
          height: 15px;
          /* background-color: blueviolet; */
        }
        .text{
          /* overflow-wrap: break-word; */
          margin-left: 3px;
          margin-top: 5px;
          font-size: 12px;
          font-weight: 300;
          /* margin: 0 auto; */
          /* background-color: yellow; */
          padding-right: 13px;
          border-right:1.5px solid rgb(151, 151, 151); 
        }
      }
      .menu:hover{
        background-color: #f7f7f7;
        color: #0176d3;
      }
    }
  }
}
</style>